Common buttons Guidelines 常用按鈕指導規則

Usage  用法

按鈕透過明確的互動提示，引導使用者完成關鍵任務。適用於以下場景：

• 表單提交

• 確認或取消操作

• 導航

• 互動式卡片

• 購買或預訂

Anatomy 結構

Label text  標籤文字

• 按鈕文字應採用清晰易懂的動詞，例如“提交”、“新增”或“檢視全部”。

• 避免使用冗長或含糊的文字。

• 按鈕寬度應適應文字長度，避免過寬或過窄。

Container 容器

按鈕應具有適當的邊距和填充，確保易於點選。圓角設計提升可讀性，避免過於尖銳的邊角。

icon 可選圖示

根據不同的語言可在按鈕左側或右側新增圖示，增強指引效果。圖示應與文字搭配使用，避免單獨使用導致理解困難。

Elevated Buttons 懸浮按鈕

凸起按鈕是帶陰影的填充按鈕，用於與背景分離。

適用場景：在圖片或花紋背景上，需要突出顯示的按鈕，如結賬頁面的"下單"按鈕。

注意事項：謹慎使用以避免介面雜亂，陰影高度越高，按鈕越突出。

Filled Buttons 填充按鈕

填充按鈕是視覺上最顯眼的按鈕，適用於關鍵任務，如儲存、加入、確認等最終操作。

特點：

• 具有純色背景，提供清晰的互動反饋。

• 適用於需要高強排程的操作，如付款或新增購物車。

注意事項：

• 寬度可根據文字內容或響應式佈局進行調整。

• 在介面中不應使用過多填充按鈕，以免降低主按鈕的優先順序。

Filled Tonal Buttons 填充色調按鈕

填充色調按鈕是填充按鈕和描邊按鈕之間的折中方案。

適用場景：

• 需要比描邊按鈕（Outlined Button）更強調，但不如填充按鈕突出的次要操作。

• 適用於“下一步”或其他引導性按鈕，例如新手引導流程中的“繼續”按鈕。

Outlined Buttons 描邊按鈕

描邊按鈕是中等強調級別的按鈕，適用於次要操作。

適用場景：需要支援但不是主操作的按鈕，例如“檢視更多”或“取消”。與填充按鈕搭配使用，以區分主要和次要操作。

Text buttons 文字按鈕

文字按鈕用於最低優先順序的操作，特別適用於提供多個選項時。文字按鈕可以放置在各種背景上，直到使用者與其互動，其容器才會變得可見。

最低優先順序操作的使用場景

嵌入式使用場景：文字按鈕常嵌入卡片、對話方塊、影象等元件中。儘管背景不同，但按鈕本身仍然具有較高的可讀性。

卡片中的文字按鈕：在卡片中，文字按鈕有助於維持資訊的可視性。

對話方塊中的文字按鈕：由於缺少容器邊框，按鈕的作用更為明確。此外，還需要根據不同語言的閱讀習慣調整按鈕的位置，例如在左至右（LTR）語言中將按鈕對齊到右側，而在右至左（RTL）語言中則對齊到左側。（圖片）

Responsive layout 響應式佈局

在大螢幕上顯示按鈕時，我們會根據具體內容和使用者需要來調整按鈕的外觀和位置。

以航班資訊頁面為例：

• 當網頁變寬時，按鈕會自動調整佈局以適應更大的空間

• 當網頁變窄時，按鈕會重新排列，確保它們的位置和對齊方式仍然清晰易用

按鈕會隨容器大小變化：當卡片或對話方塊等容器調整尺寸時，按鈕的位置和大小也會相應調整。

按鈕的排列方式指南：

適應不同螢幕尺寸的按鈕佈局：當容器調整大小時，按鈕也應根據新的佈局進行調整，以確保資訊的可讀性和互動體驗的一致性。

Interaction & style 互動與樣式

高對比度有助於區分元素：相似樣式的元件如果不符合 3:1 對比度標準，則不應一起使用。

3:1 對比度標準要求按鈕與背景顏色對比至少為 3:1。多個按鈕同時使用時，若對比度過低會難以區分且影響可讀性。但單個低對比度按鈕由於沒有對比物件，仍易於識別。